<template>
  <div id="title">
    <div class="title-header">
      <div
        v-show="isShowBack"
        class="title-left titles el-icon-arrow-left"
        @click="goBack"
      >
        返回
      </div>
      <div class="title-center" :style="{ margin: isShowBack ? '0 auto' : '' }">
        {{ name }}
      </div>
      <div v-show="showBtn" class="title-right titles">
        <el-button
          style="font-size: 14px"
          :class="iconClass"
          :type="type"
          size="mini"
          @click="btnClick"
          >{{ btnName }}</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Title",
  props: {
    name: {
      type: String,
      default: () => {
        return "标题";
      },
    },
    showBtn: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    btnName: {
      type: String,
      default: () => {
        return "默认";
      },
    },
    type: {
      type: String,
      default: () => {
        return "primary";
      },
    },
    iconClass: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowBack: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    goBack() {
      this.$store.dispatch("settings/changeRefresh", false);
      this.closeView();
      this.$router.go(-1);
    },
    btnClick() {
      this.$emit("btnClick");
    },
  },
};
</script>

<style lang='scss' scoped>
#title {
  width: 100%;
  background-color: #fff;
}
.title-header {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 15px 0;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  border-bottom: 1px solid #c3c4cb;
}
.title-left {
  left: 0;
  &:hover {
    color: #3240ff;
  }
}
.title-center {
  max-width: 60%;
  color: #323233;
  font-weight: 600;
  font-size: 15px !important;
}
.title-right {
  right: 0;
}
.titles {
  position: absolute;
  top: 0;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
</style>
